<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子布局</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .hezi {
            width: 100%;
            height: 100%;

            background-color: rgb(205, 235, 235);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;

        }

        .tz {
            margin-top: 25px;
            margin-left: 50px;
            margin-right: 50px;
            width: 300px;
            height: 300px;
            background-color: rgb(56, 54, 54);
            border-radius: 10%;
            display: flex;
        }

        .tz1 {
            justify-content: center;
        }

        .t1 {
            width: 30%;
            height: 30%;
            background-color: white;
            border-radius: 50%;
            align-self: center;
        }

        .tz2 {
            justify-content: space-between;
            align-items: center;
        }

        .t2 {
            margin: 20px;
            width: 30%;
            height: 30%;
            background-color: white;
            border-radius: 50%;
        }

        .t3 {
            margin: 5px;
        }

        .s {
            width: 30%;
            height: 30%;
            background-color: white;
            border-radius: 50%;
        }

        .z {
            width: 30%;
            height: 30%;
            background-color: white;
            border-radius: 50%;
            align-self: center;
        }

        .x {
            width: 30%;
            height: 30%;
            background-color: white;
            border-radius: 50%;
            align-self: end;
        }

        .tz4 {
            flex-wrap: wrap;
        }

        .t4 {
            margin: 30px;
            width: 30%;
            height: 30%;
            background-color: white;
            border-radius: 50%;
        }

        .tz5 {
            align-items: center;
            flex-direction: column;
        }

        .t5bjs {
            width: 100%;
            height: 33.33%;
            display: flex;
        }

        .t5bjz {
            width: 100%;
            height: 33.33%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .t5bjx {
            width: 100%;
            height: 33.33%;
            display: flex;
        }

        .t5 {
            width: 30%;
            height: 85%;
            background-color: white;
            border-radius: 50%;
        }

        .sz {
            margin: 10px;
            margin-right: 50px;
        }

        .sy {
            margin: 10px;
            margin-left: 50px;
        }

        .zj {
            align-self: center;
        }

        .xz {
            margin-left: 10px;
            margin-right: 50px;
        }

        .xy {
            margin-right: 5px;
            margin-left: 50px;
        }

        .tz6 {
            flex-direction: column;
            flex-wrap: wrap;
            align-items:center;
        }

        .t6 {
            margin: 5px;
            width: 30%;
            height: 30%;
            background-color: white;
            border-radius: 50%;
        }

    </style>
</head>

<body>
    <div class="hezi">
        <div class="tz1 tz">
            <div class="t1"></div>
        </div>

        <div class="tz2 tz">
            <div class="t2"></div>
            <div class="t2"></div>
        </div>

        <div class="tz3 tz">
            <div class="t3 s"></div>
            <div class="t3 z"></div>
            <div class="t3 x"></div>
        </div>

        <div class="tz4 tz">
            <div class="t4 "></div>
            <div class="t4 "></div>
            <div class="t4 "></div>
            <div class="t4 "></div>
        </div>

        <div class="tz5 tz">
            <div class="t5bjs">
                <div class="t5 sz"></div>
                <div class="t5 sy"></div>
            </div>
            <div class="t5bjz">
                <div class="t5 zj"></div>
            </div>
            <div class="t5bjx">
                <div class="t5 xz"></div>
                <div class="t5 xy"></div>
            </div>
        </div>

        <div class="tz6 tz">
            <div class="t6"></div>
            <div class="t6"></div>
            <div class="t6"></div>
            <div class="t6"></div>
            <div class="t6"></div>
            <div class="t6"></div>
        </div>

    </div>
</body>

</html>